<template>
	<view class="">
		<headerinfo></headerinfo>
		<view class="width60" ref="echartsWrapper">


			<!-- 	<u-tabbar :value="tabbarIndex" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
					<u-tabbar-item text="主页" icon="home" @click="tabbarCheck(0)"></u-tabbar-item>
					<u-tabbar-item text="留言" icon="chat" @click="tabbarCheck(1)"></u-tabbar-item>
					<u-tabbar-item text="祭奠" icon="heart" @click="tabbarCheck(2)"></u-tabbar-item>
					<u-tabbar-item text="生活" icon="star" @click="tabbarCheck(3)"></u-tabbar-item>
					<u-tabbar-item text="追忆" icon="bell" @click="tabbarCheck(4)"></u-tabbar-item>
				</u-tabbar>
			 -->
			<u-navbar
				:title="tabbarIndex == 1?'给'+(info.hallDTO&&info.hallDTO.realname?info.hallDTO.realname:'')+'说句话':(info.hallDTO&&info.hallDTO.realname?info.hallDTO.realname:'')"
				leftIconColor="#fff" :autoBack="true" :bgColor="bgColor" :titleStyle="titleStyle"></u-navbar>
			<view class="formBox" :class="tabbarIndex > 2?'padding0':''">
				<alljinian v-if="tabbarIndex == 1 || tabbarIndex == 2"></alljinian>
				<view class="searchPage" :class="tabbarIndex > 2?'width100':''">

					<view class="tingInfo" v-if="tabbarIndex == 0"
						:style="{ height:navHeight+'px',backgroundImage: 'url(' + config.hallBackground + ')'}">
						<view class="editBox" @click="editTing">
							<view class="editimg">
								<image src="https://cdn-oss.familylove.online/user/kmh/image/1732968959044_71337034.jpg"
									mode="aspectFill" class=""></image>
							</view>
							<view class="descs">
								编辑
							</view>
						</view>

						<view class="laokebox" @click="toChat">
							<view class="laoke">
								<image src="https://cdn-oss.familylove.online/user/kmh/image/1734949559949_88524267.jpg"
									mode="aspectFill" class=""></image>
							</view>
							<view class="descs">
								唠嗑
							</view>
						</view>

						<view class="userData" v-if="info.hallDTO">
							<image :src="info.hallDTO.avatar" mode="widthFix"></image>
							<view class="name">
								{{info.hallDTO.hallName}}
							</view>
							<view class="time">
								{{info.hallDTO.birthday?info.hallDTO.birthday:'未详'}} -
								{{info.hallDTO.passDate?info.hallDTO.passDate:'未详'}}
							</view>
						</view>
					</view>


					<view class="tingInfo1" style="overflow-y: scroll;" v-if="tabbarIndex == 1">
						<view class="containerlist">
							<!-- 评论 -->
							<view class="evalution" v-if="comments && comments.length > 0">
								<view v-for="(item, index) in comments" :key="index" class="eva-item">
									<image class="touxiang" v-if="item.avatar" :src="item.avatar" mode="aspectFill">
									</image>
									<view class="defaultTx" v-else>
										<span>{{ item.username[0] }}</span>
									</view>

									<view class="eva-right">
										<text>{{ item.username }}</text>
										<text class="content">{{ item.content }}</text>
										<span class="date">
											{{ item.dataUpdateTime.substr(5, 11) }}
											<span @click="delcomments(item.docId, index)"
												v-if="username == item.username">删除</span>
											<span @click="callBack(item)">回复</span>
										</span>
										<span class="huifuBox" @click="showHuifuMore(item)"
											v-if="item.children && item.children.length > 0">
											<span>
												{{ item.children.length }} 回复
												<i class="iconfont">&#xe613;</i>
											</span>
										</span>
									</view>
								</view>

								<view class="" style="height: 350rpx;">

								</view>
							</view>
							<view class="noPinglun" v-else>快来发布第一条留言吧</view>
						</view>

						<view class="bottom lastenter"
							:style="{ bottom:(keyboardHeight?keyboardHeight:safeAreaInsets.bottom+50)+'px'}">
							<view class="backBox" v-if="backUser.username">
								回复：{{ backUser.username }}
								<span @click="clearBack" style="margin-left: 10rpx;">取消回复</span>
							</view>
							<view class="flix">
								<view class="input-box">
									<textarea class="input" v-model="commentArticleForm.content" placeholder="发表留言.."
										placeholder-style="color:#adb1b9;" :adjust-position="false"></textarea>
								</view>
								<text class="confirm-btn" @click="submit">提交</text>
							</view>
						</view>

					</view>


					<view class="tingInfo2"
						:style="{ backgroundImage: info.hallDTO && info.hallDTO.hallStyleImageUrl?'url(' + info.hallDTO.hallStyleImageUrl + ')':''}"
						v-if="tabbarIndex == 2">
						<view class="editBox" @click="editTing">
							<view class="editimg">
								<image src="https://cdn-oss.familylove.online/user/kmh/image/1732968959044_71337034.jpg"
									mode="aspectFill" class=""></image>
							</view>
							<view class="descs">
								编辑
							</view>
						</view>

						<view class="laokebox" @click="toChat">
							<view class="laoke">
								<image src="https://cdn-oss.familylove.online/user/kmh/image/1734949559949_88524267.jpg"
									mode="aspectFill" class=""></image>
							</view>
							<view class="descs">
								唠嗑
							</view>
						</view>
						<view class="userimg" @click="priveImg(info.hallDTO.avatar)">
							<image :src="info.hallDTO.avatar" mode="widthFix"></image>
						</view>
						<!-- 花圈 -->
						<view class="huaquan" v-if="xingli &&  xingli['花圈']">
							<image v-for="(item,index) in xingli['花圈']" :key="index" class="left"
								:src="item.assetPicUrl" mode="widthFix"></image>
						</view>
						<view class="mubei">
							<!-- <view class="name">
									{{info.hallDTO.realname}}
								</view>
								<view class="date">
									<view class="">
										2012-12-12 
									</view>
									<view class="">
										2012-12-12 
									</view>
								</view> -->


							<image class="left" :src="info.hallDTO.gravestoneStyleImageUrl" mode="widthFix"></image>
						</view>
						<view class="changmingdeng">
							<image v-for="(item,index) in denglist" :key="index" class="left" :src="item.assetPicUrl"
								mode="widthFix"></image>
						</view>
						<view class="hua" v-if="xingli && xingli['鲜花']">
							<image v-for="(item,index) in xingli['鲜花']" :key="index" :src="item.assetPicUrl"
								mode="widthFix">
							</image>

						</view>
						<view class="jugong">
							<image :src="jugongimg" mode="widthFix">
							</image>
						</view>
						<view class="lazhu" v-if="xingli && xingli['点烛']">
							<image v-for="(item,index) in xingli['点烛']" :key="index" :src="item.assetPicUrl"
								mode="widthFix">
							</image>

						</view>
						<view class="food" :style="{ bottom:'19.5vh'}">
							<image v-for="(item,index) in foodarr" :key="index" :src="item.assetPicUrl" mode="widthFix">
							</image>


						</view>
						<view class="btns">
							<span @click="toJiDian(1)">点长明灯</span>
							<span @click="toJiDian(2)">我要祭奠</span>
						</view>
					</view>


					<view class="tingInfo2" v-if="tabbarIndex == 3">
						<life ref="life"></life>

					</view>
					<view class="tingInfo2" v-if="tabbarIndex == 4">
						<searchover ref="searchover"></searchover>

						<view class="" style="height: 200rpx;background-color: #f8f8f8;">

						</view>
					</view>




					<!--回复弹窗-->
					<tui-bottom-popup :show="huifuDia" @close="huifuDia = false">
						<view class="backTanBox" v-if="backData.children && backData.children.length > 0">
							<view class="title">
								<i class="iconfont" @click="huifuDia = false">&#xe607;</i>
								{{ backData.children.length }} 条回复
							</view>
							<view class="containerlist" style="border-bottom: 1px solid #efefef;">
								<!-- 评论 -->
								<view class="evalution">
									<view class="eva-item">
										<image class="touxiang" v-if="backData.avatar" :src="backData.avatar"
											mode="aspectFill">
										</image>
										<view class="defaultTx" v-else>
											<span>{{ backData.username[0] }}</span>
										</view>

										<view class="eva-right">
											<text>{{ backData.username }}</text>
											<text class="content">{{ backData.content }}</text>
											<text class="date">{{ backData.dataUpdateTime.substr(5, 11) }}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="mainBox">
								<view class="containerlist">
									<!-- 评论 -->
									<view class="backAllName">全部回复</view>
									<view class="evalution">
										<view v-for="(item, index) in backData.children" :key="index" class="eva-item">
											<image class="touxiang" v-if="item.avatar" :src="item.avatar"
												mode="aspectFill">
											</image>
											<view class="defaultTx" v-else>
												<span>{{ item.username[0] }}</span>
											</view>

											<view class="eva-right">
												<text>{{ item.username }}</text>
												<text class="content">{{ item.content }}</text>
												<text class="date">{{ item.dataUpdateTime.substr(5, 11) }}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</tui-bottom-popup>
				</view>

				<view class="tingleft" v-if="tabbarIndex == 1 || tabbarIndex == 2">
					<view class="userInfo">
						<view class="touxiangs">
							<image :src="info.hallDTO.avatar" mode="aspectFill"></image>
							<span>{{info.hallDTO.hallName}}</span>
						</view>

						<!-- 	<u-tabbar :value="tabbarIndex" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
								<u-tabbar-item text="主页" icon="home" @click="tabbarCheck(0)"></u-tabbar-item>
								<u-tabbar-item text="留言" icon="chat" @click="tabbarCheck(1)"></u-tabbar-item>
								<u-tabbar-item text="祭奠" icon="heart" @click="tabbarCheck(2)"></u-tabbar-item>
								<u-tabbar-item text="生活" icon="star" @click="tabbarCheck(3)"></u-tabbar-item>
								<u-tabbar-item text="追忆" icon="bell" @click="tabbarCheck(4)"></u-tabbar-item>
							</u-tabbar>
						 -->
						<view class="nums">
							<view class="li list22" @click="tabbarCheck(1)">
								<image
									src="https://lf-dw.toutiaostatic.com/obj/toutiao-duanwai/toutiao/toutiao_web_pc/svgs/article_icon.c91fb7e0.svg"
									mode="aspectFill"></image>
								<span>去留言</span>
							</view>
							<view class="li list22" @click="tabbarCheck(2)">
								<image
									src="https://lf-dw.toutiaostatic.com/obj/toutiao-duanwai/toutiao/toutiao_web_pc/svgs/wtt_icon.0c5bb1de.svg"
									mode="aspectFill"></image>
								<span>去祭奠</span>
							</view>
							<view class="li list22" @click="tabbarCheck(3)">
								<image
									src="https://lf-dw.toutiaostatic.com/obj/toutiao-duanwai/toutiao/toutiao_web_pc/svgs/wenda_icon.0d6d1616.svg"
									mode="aspectFill"></image>
								<span>去生活</span>
							</view>
							<view class="li list22" @click="tabbarCheck(4)">
								<image
									src="https://lf-dw.toutiaostatic.com/obj/toutiao-duanwai/toutiao/toutiao_web_pc/svgs/wenda_icon.0d6d1616.svg"
									mode="aspectFill"></image>
								<span>去名片</span>
							</view>
						</view>
					</view>

				</view>
			</view>

		</view>





		<!-- <u-popup :show="chatDia" :round="10" mode="center" @close="chatDia = false" background-color="#fff">
			<view class="chatDiaBox">
				<view class="title">
					和亲人对话
				</view>
				<view class="check" @click="linkageVisible = true">
					{{guanxi?guanxi:'请选择和亲人的关系'}}
				</view>

				<view class="checkduihua" @click="start()">
					<view class="listbox">
						<view class="btn">
							<span>立即开始</span>
						</view>

					</view>
				</view>
			</view>

		</u-popup> -->


		<el-dialog title="" :visible.sync="chatDia" width="400">
			<view class="chatDiaBox">
				<view class="title">
					和亲人对话
				</view>
				<!-- <view class="check" @click="showlinkageVisible">
				{{guanxi?guanxi:'请选择和亲人的关系'}}
			</view> -->
				<el-cascader placeholder="请选择和亲人的关系" v-model="guanxi" @change="onConfirmguanxi" style="width: 100%;"
					:options="options"></el-cascader>


				<view class="checkduihua" @click="start()">
					<view class="listbox">
						<view class="btn">
							<span>立即开始</span>
						</view>

					</view>
				</view>
			</view>
		</el-dialog>


		<!-- 
		<w-picker :visible.sync="linkageVisible" mode="linkage" :options="options" :level="2" default-type="id"
			:default-props="defaultProps1" @confirm="onConfirmguanxi($event,'linkage')" ref="linkage"></w-picker> -->
	</view>
</template>

<script>
	const util = require('@/common/refresh.js');
	import tuiBottomPopup from '@/components/bottom-popup/bottom-popup';
	import life from '@/pagesobit/obit/lifeindex';
	import searchover from '@/pagesobit/obit/searchover.vue';
	import alljinian from './components/alljinian'
	export default {
		components: {
			tuiBottomPopup,
			life,
			searchover,
			alljinian,
		},
		data() {
			return {
				guanxi: '',
				linkageVisible: false,
				defaultProps1: {
					label: "name",
					value: "name",
					children: "child"
				},
				options: [{
					value: '同辈',
					label: '同辈',
					children: []
				}, {
					value: '小辈',
					label: '小辈',
					children: []
				}, {
					value: '长辈',
					label: '长辈',
					children: []
				}],
				chatDia: false,
				username: uni.getStorageSync('username') ? uni.getStorageSync('username') : '',
				familyMemberId:'',
				familyId:'',
				comments: [],
				bgColor: '#de4849',
				titleStyle: {
					color: '#fff'
				},
				tabbarIndex: 2,
				hallList: [],
				hallId: '',
				museumId: '',
				info: {
					hallDTO: {},
				},
				backUser: {},
				commentArticleForm: {
					content: '',
					replyCommentId: '',
					articleId: '',
					lifeId: '',
					hallId: ''
				},
				backData: {},
				huifuDia: false,
				navHeight: 0,
				safeAreaInsets: {},
				xingli: {},
				foodarr: [],
				denglist: [],
				jugongimg: '',
				queryDs: {},
				keyboardHeight: 0,
				config: {}
			};
		},
		onLoad(e) {
			this.hallId = e.hallId
			uni.$on('checkjugong', (data) => {
				this.jugongimg = data.assetPicUrl

				setTimeout(() => {
					this.jugongimg = ''
				}, 10000)
			})
		},
		mounted() {

		},
		onUnload() {
			// 页面销毁时移除监听
			uni.offKeyboardHeightChange(() => {});
		},
		onShow() {
			this.getData()
			this.getSysParam()
			const {
				safeAreaInsets
			} = uni.getSystemInfoSync()
			this.safeAreaInsets = safeAreaInsets
			console.log('safeAreaInsets', safeAreaInsets)

			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success: (res) => { //成功回调函数
					const windowHeight = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
					console.log(windowHeight)
					this.navHeight = (windowHeight - 44 - 50 - this.safeAreaInsets.top - this.safeAreaInsets
						.bottom)
				}
			})


			//  监听键盘高度变化
			uni.onKeyboardHeightChange((res) => {
				// 获取系统信息
				if (res.height) {
					let _sysInfo = uni.getSystemInfoSync()
					let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight
					let _diff = res.height - _heightDiff
					this.keyboardHeight = _diff > 0 ? _diff : 0


					//  let deviceBottom= this.safeAreaInsets.bottom;  
					//  this.keyboardHeight = res.height ? (res.height - deviceBottom - deviceBottom) : 0  
				} else {
					this.keyboardHeight = 0
				}
			})
			console.log('this.tabbarIndex', this.tabbarIndex);

			if (this.tabbarIndex == 4) {
				this.$nextTick(() => {
					console.log()
					let data = {
						familyId: this.info.hallDTO.familyId,
						familyAttenders: [this.info.hallDTO.familyMemberId],
						isDraft: false,
						pageSize: 10,
						username: this.info.hallDTO.username,
					}

					this.$refs.searchover.initSearch(data)
				})
			}

			if (this.tabbarIndex == 3) {
				this.$nextTick(() => {
					let username = this.info.hallDTO.username ? this.info.hallDTO.username : ''
					let realname = this.info.hallDTO.realname ? this.info.hallDTO.realname : ''
					console.log('life init', this.info.hallDTO.familyMemberId, username, realname);
					this.$refs.life.init(this.info.hallDTO.familyMemberId, username, realname)
				})
			}
		},
		methods: {
			getSysParam() {
				this.$api.getSysParam().then(res => {
					console.log(res)
					this.config = res
				})
			},
			showlinkageVisible() {
				console.log(this.options)
				this.linkageVisible = true
			},
			toChat() {
				// let guanxi = this.guanxi
				let familyMemberId = this.info.hallDTO.familyMemberId
				let avatar = this.info.hallDTO.avatar ? this.info.hallDTO.avatar : ''
				this.checked = this.info.hallDTO


				this.$api.queryFamilyMemberRelation({
					familyMemberId
				}).then(res => {
					if (res) {
						this.guanxi = res
					}
					this.$api.getRelation({
						familyMemberId
					}).then(res2 => {
						console.log(res2)
						let tongbei = []
						if (res2.equal.length > 0) {
							res2.equal.forEach(item => {
								tongbei.push({
									value: item,
									label: item,
								})
							})
						}

						let xiaobei = []
						if (res2.younger.length > 0) {
							res2.younger.forEach(item => {
								xiaobei.push({
									value: item,
									label: item,
								})
							})
						}

						let zhangbei = []
						if (res2.elder.length > 0) {
							res2.elder.forEach(item => {
								zhangbei.push({
									value: item,
									label: item,
								})
							})
						}

						this.options[0].children = tongbei
						this.options[1].children = xiaobei
						this.options[2].children = zhangbei

						this.chatDia = true


						console.log('this.options')
						console.log(this.options)

					})

				})


			},
			start() {

				let guanxi = this.guanxi
				let familyMemberId = this.checked.familyMemberId
				let avatar = this.checked.avatar ? this.checked.avatar : ''
				let familyId = this.info.hallDTO.familyId

				this.chatDia = false
				uni.navigateTo({
					url: `/pages/chat/chat?guanxi=${guanxi}&familyMemberId=${familyMemberId}&avatar=${avatar}&familyId=${familyId}`
				})
			},
			onConfirmguanxi(e) {


				// 绑定关系	
				let data = {
					relation: e[1],
					familyMemberId: this.checked.familyMemberId
				}
				this.$api.upsertFamilyMemberRelation(data).then(res => {
					console.log(res)
					this.guanxi = e[1]

				})
			},
			editTing() {
				console.log(this.info)
				let hallId = this.info.hallDTO.docId
				let familyId = this.info.hallDTO.familyId
				let museumId = this.info.hallDTO.museumId
				let userid = this.info.hallDTO.familyMemberId
				let id = this.info.hallDTO.docId

				uni.navigateTo({
					url: `/pagesobit/obit/createting?hallId=${hallId}&familyId=${familyId}&museumId=${museumId}&userid=${userid}&id=${id}`
				})

			},
			showHuifuMore(data) {
				this.backData = data;
				this.huifuDia = true;
			},
			submit: util.throttle(function() {
				if (this.commentArticleForm.content == '') {
					return this.$Show.show('输入点信息吧。');
				}


				this.commentArticleForm.hallId = this.hallId
				this.$api.hallcommentHall(this.commentArticleForm).then(res => {
					this.setComment(res)
				});
			}),
			delcomments(commentId, index) {
				let data = {
					articleId: this.articleId,
					commentId,
					hallId: this.hallId
				};

				console.log(index);
				this.$api.halldeleteComment(data).then(res => {
					this.$Show.show('删除成功');
					this.comments.splice(index, 1);
				});

			},
			setComment(res) {
				this.$Show.show('留言成功');
				this.commentArticleForm.content = '';
				this.backUser = {};
				this.commentArticleForm.replyCommentId = '';
				this.getData()
				uni.pageScrollTo({
					scrollTop: 999999,
					duration: 300 // 滚动动画时长，默认300ms
				});
			},
			clearBack() {
				this.commentArticleForm.replyCommentId = '';
				this.backUser = {};
			},
			getData() {
				let data = {
					hallId: this.hallId
				}
				this.$api.hallgetHall(data).then(res => {
					console.log('hallgetHall', res)
					if (res.hallDTO) {
						if (res.hallDTO.familyId) {
							this.familyId = res.hallDTO.familyId
						}
						if (res.hallDTO.familyMemberId) {
							this.familyMemberId = res.hallDTO.familyMemberId
						}
					}
					//把评论转成树形结构
					if (res.hallDTO.comments && res.hallDTO.comments.length > 0) {
						res.hallDTO.comments = this.$utils.treeDataTranslate2(res.hallDTO.comments, 'docId',
							'replyCommentId');
						this.comments = res.hallDTO.comments
					}

					let foodarr = []
					let denglist = []



					this.xingli = {}
					if (res.assetInfo) {
						res.assetInfo = this.convertData(res.assetInfo)
						res.assetInfo.forEach(item => {
							if (item.name == '行礼') {
								this.xingli = item.children
							}

							if (item.name == '供礼') {
								Object.keys(item.children).forEach(key => {
									item.children[key].forEach(item2 => {
										foodarr.push(item2)
									})
								})
							}

							if (item.name == '献礼') {
								Object.keys(item.children).forEach(key => {
									item.children[key].forEach(item2 => {
										foodarr.push(item2)
									})
								})

							}


							console.log(item.name)
							if (item.name == '长明灯') {
								Object.keys(item.children).forEach(key => {
									item.children[key].forEach(item2 => {
										denglist.push(item2)
									})
								})

							}


						})

						this.foodarr = foodarr
						this.denglist = denglist



						console.log(this.denglist)

					}
					this.info = res
					this.museumId = this.info.hallDTO.museumId
					console.log(this.info)

					if (this.tabbarIndex == 3) {
						this.$nextTick(() => {
							let username = this.info.hallDTO.username ? this.info.hallDTO.username : ''
							let realname = this.info.hallDTO.realname ? this.info.hallDTO.realname : ''

							console.log(realname)
							this.$refs.life.init(this.info.hallDTO.familyMemberId, username, realname)
						})
					}

				})
			},
			convertData(rawData) {
				return Object.keys(rawData).map(key => ({
					name: key,
					children: rawData[key] // 直接使用原始数据中的数组
				}));
			},
			tabbarCheck(index) {
				this.tabbarIndex = index
				console.log('tabbarCheck index', index);
				if (index == 4) {
					// this.$nextTick(() => {
					// 	let data = {
					// 		familyId: this.info.hallDTO.familyId,
					// 		familyAttenders: [this.info.hallDTO.familyMemberId],
					// 		isDraft: false,
					// 		pageSize: 10,
					// 	}

					// 	this.$refs.searchover.initSearch(data)
					// })
					let username = this.info.hallDTO.username ? this.info.hallDTO.username : ''
					this.toPage(`/pages/card/index?id=${this.familyMemberId}&username=${username}&card=1`)
				}

				if (index == 3) {
					let username = this.info.hallDTO.username ? this.info.hallDTO.username : ''
					this.toPage(`/pages/life/index?username=${username}&onlyView=true`)
					// this.$nextTick(() => {
					// 	let realname = this.info.hallDTO.realname ? this.info.hallDTO.realname : ''
					// 	console.log('life init',this.info.hallDTO.familyMemberId, username, realname);
					// 	this.$refs.life.init(this.info.hallDTO.familyMemberId, username, realname)
					// })
				}


			},
			toPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			toJiDian(type) {
				uni.navigateTo({
					url: `/pagesobit/obit/eternallamp?hallId=${this.hallId}&type=${type}`
				})
			},
			//回复评论
			callBack(item) {
				console.log(item);
				this.backUser = item;
				this.commentArticleForm.replyCommentId = item.docId;
			},
			priveImg(url) {
				uni.previewImage({
					urls: [url],
					current: 0
				})
			}
		}
	};
</script>


<style lang="scss" scoped>
	.formBox {
		display: flex;
		justify-content: space-between;
		padding: 0 40rpx;

	}

	.padding0 {
		padding: 0;
	}

	/* 底部 */
	.bottom {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.04);
		position: absolute;
		bottom: 50px;
		z-index: 1;
		height: auto;
		width: 100%;
		background-color: #fff;
		z-index: 10;
		padding: 20rpx 20rpx;
		flex-direction: column;

		.backBox {
			margin-bottom: 20rpx;
			font-size: 28rpx;
			color: #9d9d9d;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
		}

		.flix {
			width: 100%;
			display: flex;
			align-items: center;
		}

		.input-box {
			display: flex;
			align-items: center;
			flex: 1;
			height: 150rpx;
			background: #f2f3f3;
			border-radius: 20rpx;
			padding: 15rpx;

			.icon-huifu {
				font-size: 28upx;
				color: #909399;
			}

			.input {
				padding: 0 20rpx;
				font-size: 28rpx;
				color: #303133;
				height: 100%;
				width: 494rpx;
			}
		}

		.confirm-btn {
			font-size: 30rpx;
			padding-left: 20rpx;
			color: #de4849;
			white-space: nowrap;
		}
	}

	.changmingdeng {
		image:nth-child(1) {
			width: 180rpx;
			height: auto;
			position: absolute;
			bottom: 29vh;
			left: 195rpx;
		}

		image:nth-child(2) {
			width: 180rpx;
			height: auto;
			position: absolute;
			bottom: 29vh;
			right: 195rpx;
		}
	}

	.huaquan {
		image:nth-child(1) {
			width: 240rpx;
			height: auto;
			position: absolute;
			bottom: 280rpx;
			left: -10rpx;
		}

		image:nth-child(2) {
			width: 240rpx;
			height: auto;
			position: absolute;
			bottom: 280rpx;
			right: -10rpx;
		}

		image:nth-child(3) {
			width: 240rpx;
			height: auto;
			position: absolute;
			bottom: 244rpx;
			left: -22rpx;
		}

		image:nth-child(4) {
			width: 240rpx;
			height: auto;
			position: absolute;
			bottom: 244rpx;
			right: -22rpx;
		}

		image:nth-child(5) {
			width: 240rpx;
			height: auto;
			position: absolute;
			bottom: 204rpx;
			left: -37rpx;
		}

		image:nth-child(6) {
			width: 240rpx;
			height: auto;
			position: absolute;
			bottom: 204rpx;
			right: -37rpx;
		}

		image:nth-child(7) {
			width: 240rpx;
			height: auto;
			position: absolute;
			bottom: 164rpx;
			left: -54rpx;
		}

		image:nth-child(8) {
			width: 240rpx;
			height: auto;
			position: absolute;
			bottom: 164rpx;
			right: -54rpx;
		}
	}

	.hua {
		position: absolute;
		bottom: 10vh;
		width: 500rpx;
		left: 52%;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;

		image:nth-child(1) {
			width: 130rpx;
			height: auto;
			position: absolute;
			left: 200rpx;
			bottom: 0;
		}

		image:nth-child(2) {
			width: 130rpx;
			height: auto;
			position: absolute;
			left: 120rpx;
			bottom: 0;
		}

		image:nth-child(3) {
			width: 130rpx;
			height: auto;
			position: absolute;
			right: 90rpx;
			bottom: 0;
		}

		image:nth-child(4) {
			width: 130rpx;
			height: auto;
			position: absolute;
			left: 40rpx;
			bottom: 0;
		}

		image:nth-child(5) {
			width: 130rpx;
			height: auto;
			position: absolute;
			right: 10rpx;
			bottom: 0;
		}

		image:nth-child(6) {
			width: 130rpx;
			height: auto;
			position: absolute;
			left: -40rpx;
			bottom: 0;
		}
	}

	.jugong {
		position: absolute;
		bottom: 0rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 100;

		image {
			width: 170rpx;
			height: auto;
		}
	}

	.food {
		width: 400rpx;
		margin: 0 auto;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		height: 10vh;
		z-index: 10;

		image:nth-child(1) {
			width: 60rpx;
			position: absolute;
			left: 10rpx;
			top: 0;
		}

		image:nth-child(2) {
			width: 60rpx;
			position: absolute;
			left: 70rpx;
			top: 0;
		}

		image:nth-child(3) {
			width: 60rpx;
			position: absolute;
			left: 130rpx;
			top: 0;
		}

		image:nth-child(4) {
			width: 60rpx;
			position: absolute;
			left: 190rpx;
			top: 0;
		}

		image:nth-child(5) {
			width: 60rpx;
			position: absolute;
			left: 250rpx;
			top: 0;
		}

		image:nth-child(6) {
			width: 60rpx;
			position: absolute;
			left: 310rpx;
			top: 0;
		}

		image:nth-child(7) {
			width: 60rpx;
			position: absolute;
			left: 0;
			bottom: 0;
		}

		image:nth-child(8) {
			width: 60rpx;
			position: absolute;
			left: 60rpx;
			bottom: 0;
		}

		image:nth-child(9) {
			width: 60rpx;
			position: absolute;
			left: 290rpx;
			bottom: 0;
		}

		image:nth-child(10) {
			width: 60rpx;
			position: absolute;
			right: 0;
			bottom: 0;
		}


	}

	.lazhu {
		width: 170rpx;
		margin: 0 auto;
		position: absolute;
		bottom: 21vh;
		left: 52%;
		transform: translateX(-50%);
		height: 60rpx;
		z-index: 90;

		image:nth-child(1) {
			width: 60rpx;
			position: absolute;
			left: 0;
			bottom: 0;
		}

		image:nth-child(2) {
			width: 60rpx;
			position: absolute;
			right: 0;
			bottom: 0;
		}
	}

	.tingInfo {
		width: 100%;
		height: calc(100vh - 130px);
		background-size: 100% 100%;
		padding-top: 20vh;

		.userData {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			image {
				width: 200rpx;
				height: auto;
			}

			.name {
				font-size: 32rpx;
				margin: 30rpx 0;
				margin-top: 100rpx;
			}

			.time {
				font-size: 26rpx;
			}

		}
	}

	.tingInfo2 {
		width: 100%;
		height: calc(100vh - 125px);
		background-size: 100% 100%;
		position: relative;

		.userimg {
			image {
				width: 110rpx;
				height: auto;
				position: absolute;
				top: 43%;
				left: 50%;
				transform: translate(-50%, -70%);
			}
		}

		.btns {
			position: absolute;
			bottom: 20rpx;
			left: 50%;
			transform: translateX(-50%);
			padding: 0 10%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			z-index: 10000;

			span {
				width: 250rpx;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50px;
				background-color: #2e0e01;
				color: #f7d048;
				font-size: 28rpx;
			}
		}
	}

	/* 评论 */
	.evalution {
		display: flex;
		flex-direction: column;
		padding: 20upx 0;

		.defaultTx {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			border: 1px solid #e3d803;
			background-color: #e3d803;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
		}
	}

	.eva-item {
		display: flex;
		padding: 20upx 30upx;
		position: relative;

		image {
			width: 60upx;
			height: 60upx;
			border-radius: 50px;
			flex-shrink: 0;
			margin-right: 24upx;
		}

		&:after {
			content: '';
			position: absolute;
			left: 30upx;
			bottom: 0;
			right: 0;
			height: 0;
			border-bottom: 1px solid #eee;
			transform: translateY(50%);
		}

		&:last-child:after {
			border: 0;
		}
	}

	.eva-right {
		display: flex;
		flex-direction: column;
		flex: 1;
		font-size: 26upx;
		color: #909399;
		position: relative;

		.content {
			font-size: 28upx;
			color: #333;
			padding-top: 20upx;
		}

		.date {
			margin-top: 20rpx;

			span {
				margin-left: 20rpx;
			}
		}
	}

	.detailDatacontent {
		margin-top: 20rpx;

		.images {
			margin-top: 20rpx;

			image {
				width: 100%;
			}

			.posterUrl {
				width: 100%;
			}
		}
	}




	image {
		height: auto;
	}

	.backAllName {
		padding: 0 30rpx;
		padding-top: 20rpx;
		font-size: 34rpx;
	}

	.backTanBox {
		height: 90vh;
		width: 100%;
		overflow-y: scroll;

		.title {
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 1px solid #e7e7e7;
			position: relative;
			font-size: 32rpx;

			.iconfont {
				position: absolute;
				left: 30rpx;
			}
		}
	}

	.editBox {
		position: absolute;
		top: 5%;
		right: 5%;
		z-index: 1000;
		cursor: pointer;

		.descs {
			text-align: center;
			margin-top: 10rpx;
			color: #ffffff;
			font-size: 29rpx;
		}

		.editimg {
			border-radius: 50%;
			background-color: #fff;
			width: 80rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 50rpx;
				height: 50rpx;
			}


		}

	}

	.laokebox {
		position: absolute;
		top: 5%;
		right: 20%;
		z-index: 1000;
		cursor: pointer;

		.descs {
			text-align: center;
			margin-top: 10rpx;
			color: #ffffff;
			font-size: 29rpx;
		}

		.laoke {

			border-radius: 50%;
			background-color: #fff;
			width: 80rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}


	.tingInfo1 {
		background-color: #fff;
		height: calc(100vh - 125px);

		.eva-item {
			width: 95%;
			margin: 0 auto;
			margin-bottom: 20rpx;
			box-shadow: 0 0 3px #ccc;
			border: none;
			border-radius: 10rpx;
			overflow: hidden;
		}
	}

	.noPinglun {
		position: fixed;
		top: 50%;
		left: 50%;
		color: #7d7d7d;
		transform: translate(-50%, -50%);
	}

	.mubei {
		position: absolute;
		left: 50%;
		bottom: 26vh;
		width: 50rpx;
		height: 200rpx;
		transform: translateX(-50%);

		.date {
			position: absolute;
			font-size: 21rpx;
			left: 50%;
			transform: translateX(-50%);
			top: 22%;
		}

		.name {
			position: absolute;
			font-size: 21rpx;
			left: 50%;
			transform: translateX(-50%);
			top: 12%;

		}

		image {
			width: 100%;
		}
	}


	.chatDiaBox {
		width: 700rpx;
		box-sizing: border-box;
		padding: 30rpx;
		height: 400rpx;

		.listbox {
			background-color: #245dff;
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 10rpx;
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100rpx;
			color: #fff;
			font-size: 30rpx;
		}

		.title {
			text-align: center;
			margin-bottom: 30rpx;
			margin-top: 10rpx;
		}

		.check {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #ccc;
			font-size: 28rpx;
			border-radius: 10rpx;
		}
	}



	.searchPage {
		width: 450px;
		margin: 0 auto;
		position: relative;
	}

	.width100 {
		width: 100%;

		.searchPage {
			width: 100%;

		}
	}


	.tingleft {
		width: 250px;

		.userInfo {
			width: 100%;
			height: 200px;
			border-radius: 6px;
			margin-bottom: 24px;
			padding: 20px 0;

			.touxiangs {
				display: flex;
				align-items: center;
				font-weight: bold;

				image {
					width: 30px;
					height: 30px;
					border-radius: 50%;
					margin-right: 10px;
				}

				.iconfont {
					font-size: 30rpx;
				}
			}

			.nums {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 20px 0;
				flex-wrap: wrap;
				background-color: #f8f8f8;
				border-radius: 20rpx;
				padding-bottom: 30rpx;

				.li {
					display: flex;
					align-items: center;
					font-size: 36rpx;
					width: 48%;
					margin-top: 20rpx;

					span {
						font-size: 26rpx;
						color: #908e8e;
						margin-left: 3px;
					}
				}

				.list22 {
					flex-direction: column;
					cursor: pointer;

					image {
						width: 100rpx;
						height: 100rpx;
					}
				}
			}
		}


	}
</style>